<template>
  <div style="width: 100%">
    <!-- 布局一分为二 -->
    <div class="container">
      <div class="left">
        <div class="left_top">
          <img :src="imgsrc" />
          <div class="userinfo">
            <h3>{{ userInfo.name }}</h3>
            <p>超级管理员</p>
          </div>
        </div>
        <hr />
        <div class="left_foot">
          <Table :tableData="tableData" :tableHeader="tableHeader" />
        </div>
      </div>
      <div class="right">
        <div class="tab"><Card v-for="i in 4" :key="i" /></div>
        <div class="line">
          <Echarts :isAxisChart="true" :chartData="lineData" class="echarts" />
        </div>
        <div class="two">
          <div class="bar">
            <Echarts :isAxisChart="true" :chartData="barData" class="echarts" />
          </div>
          <div class="pie">
            <Echarts
              :isAxisChart="false"
              :chartData="pieData"
              class="echarts"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Card from '../components/card.vue';
import { mapGetters } from 'vuex';
import * as echarts from 'echarts';
export default {
  name: 'DemoHome',
  components: { Card },
  data() {
    return {
      imgsrc: require('../assets/头像.webp'),
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      tableHeader: [
        {
          prop: 'date',
          label: '日期',
        },
        {
          prop: 'name',
          label: '姓名',
        },
        {
          prop: 'address',
          label: '地址',
        },
      ],
      lineData: {
        xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
          },
          {
            data: [100, 300, 150, 400, 300, 250, 97],
            type: 'line',
          },
        ],
      },
      barData: {
        xData: ['Mon', 'Tue', 'Wed', 'nihao'],
        series: [
          {
            type: 'bar',
            data: [120, 200, 150, 400],
            barWidth: 35, //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              //柱样式
              normal: {
                barBorderRadius: [5, 5, 0, 0],
                color: function (params) {
                  //渐变色，也可以直接用数组给不同的柱子设置不同的颜色
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#00e6ff',
                      },
                      {
                        offset: 1,
                        color: '#018dff',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#00fcae',
                      },
                      {
                        offset: 1,
                        color: '#006388',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#00fcae',
                      },
                      {
                        offset: 1,
                        color: '#006388',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#00e6ff',
                      },
                      {
                        offset: 1,
                        color: '#018dff',
                      },
                    ]),
                  ];
                  return colorList[params.dataIndex];
                },
                opacity: 1,
              },
            },
          },
        ],
      },
      pieData: {
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
    }),
  },
  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  // height: 100%;
  display: flex;
  .left {
    box-sizing: border-box;
    width: 33%;
    // height: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    margin-right: 10px;
    box-shadow: 1px 1px 5px white;
    border-top: 1px solid rgba(92, 142, 216, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    .left_top {
      display: flex;
      align-items: center;
      img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 20px;
      }
      .userinfo {
        text-align: center;
        color: white;
        line-height: 30px;
      }
    }
    hr {
      width: 100%;
      margin: 40px auto;
    }
    .left_foot {
      flex: 1;
    }
  }
  .right {
    flex: 1;
    padding: 20px;
    background: rgba(9, 13, 66, 0.5);
    backdrop-filter: blur(2px);
    margin-right: 10px;
    box-shadow: 1px 1px 5px white;
    border-top: 1px solid rgba(92, 142, 216, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    .tab {
      width: 100%;
      height: 120px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(6px);
      box-shadow: 1px 1px 5px white;
      border-top: 1px solid rgba(92, 142, 216, 0.5);
      border-left: 1px solid rgba(255, 255, 255, 0.5);
    }
    .line {
      width: 100%;
      height: 350px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(6px);
      box-shadow: 1px 1px 5px white;
      border-top: 1px solid rgba(92, 142, 216, 0.5);
      border-left: 1px solid rgba(255, 255, 255, 0.5);
      // background: rgb(255, 255, 255);
      margin: 50px auto;
      padding: 20px;
      box-sizing: border-box;
      .echarts {
        width: 100%;
        height: 100%;
      }
    }
    .two {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: space-between;
      .bar {
        width: 47%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(6px);
        box-shadow: 1px 1px 5px white;
        border-top: 1px solid rgba(92, 142, 216, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.5);
      }
      .pie {
        width: 47%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(6px);
        box-shadow: 1px 1px 5px white;
        border-top: 1px solid rgba(92, 142, 216, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.5);
      }
    }
  }
}
</style>
